<template>
  <view class="songs_list">
     <scroll-view scroll-y @scrolltolower="scrollTolower" class="scroll">
    <view class="songs_list_container" v-for="item in playlists" :key="item.id" @click="navSongsListDetail(item.id)">
      <image :src="item.coverImgUrl" mode=""></image>
      <view class="text">
        <text>{{ item.name }}</text>
        <text style="color: #878787; margin: 15rpx 0;">
          {{ item.trackCount + '首 ,' + ' by' + item.creator.nickname + ', ' + ' 播放' + (item.playCount / 10000).toFixed(1) + '万次' }}
        </text>
      </view>
    </view>
    <u-loadmore :status="status" icon-type />
    </scroll-view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import { getSearchKeytype } from '../../api/getSearchKeytype.js'
export default {
  name: 'songs-list',
  created() {
    this.getSongsList(1000, this.keyValue,this.limit)
  },
  computed: {
    ...mapState(['keyValue'])
  },
  data() {
    return {
      playlists: [],
       limit:10,
        page: 1,
        totalPage: 0,
        status: 'loadmore'
    }
  },
  methods: {
    async getSongsList(type, value,limit) {
      const { data: res } = await getSearchKeytype(type, value,limit)
      // console.log(res)
      if (res.code !== 200) return uni.$showMsg('歌单列表获取失败')
       this.totalPage = Math.ceil(res.result.playlistCount / res.result.playlists.length)
      this.playlists = res.result.playlists
    },
    scrollTolower() {
      if (this.page >= this.totalPage) {
        // console.log(2222)
         this.status = 'nomore'
        uni.showToast({
          title: '没有下一页了'
        })
      } else {
        setTimeout(() => {
          // console.log(1111)
          this.page++
          this.limit+=10
          this.status = 'loading'
          this.getSongsList(1000, this.keyValue,this.limit)
        }, 1000)
      }
    },
    navSongsListDetail(id){
     uni.navigateTo({
       url:'/subpkg/songs_list_detail/songs_list_detail?id='+id
     })
    }
  }
}
</script>

<style lang="scss" scoped>
.songs_list {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
}
 .scroll {
    height: calc(100vh - 160rpx);
  }
.songs_list_container {
  display: flex;
  margin-top: 30rpx;
  align-items: center;
}
.songs_list_container image {
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
  margin-left: 30rpx;
}
.songs_list_container .text {
  display: flex;
  flex-direction: column;
  margin-left: 30rpx;
}
</style>
